<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>用户管理</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="../assets/i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="../assets/i/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="../assets/i/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="../assets/css/amazeui.min.css">
    <link rel="stylesheet" href="../assets/css/app.css">

    <!--在这里编写你的代码-->

    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="../js/jquery2.js"></script>
    <!--<![endif]-->
    <!--[if lte IE 8 ]>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
    <script src="../assets/js/amazeui.ie8polyfill.min.js"></script>
    <![endif]-->
    <script src="../assets/js/amazeui.min.js"></script>
    <script src="../js/vue.js"></script>
    <!--    弹框-->
    <link rel="stylesheet" type="text/css" href="../swal/sweetalert2.min.css">
    <script src="../swal/sweetalert2.min.js"></script>
    <!-- for IE support -->
    <script src="../swal/promise.min.js"></script>
    <!--    <script src="../js/options.js"></script>-->
</head>

<style>
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /*.lhl-box-3 li{*/
    /*    padding: 10px;*/
    /*}*/
    .lhl-card-h1 {
        margin: 10px;
        font-size: 30px;
        color: #000;
    }

    #lhl-right {
        margin: 0px;
        padding: 30px;
        background: #ecf0f1;
        min-height: 1200px;
    }

    #lhl-head {
        margin: 0px;
    }

    #lhl-card {
        padding: 0px 80px 0px 80px;
    }

    #lhl-card li {
        /*padding: 0px 80px 0px 80px;*/
    }

    .lhl-echar {
        padding: 0px 80px 0px 80px;
    }

    .lhl-echar-card {
    }

    .lhl-nomargin {
        margin: 0px;
    }

    .lhl-list {
        padding-top: 10px;
    }

    .lhl-list h3 {
        margin: 0px;
        /*font-weight: bold;*/
    }

    .am-nav-header {
        border-left: 3px solid #3bb4f2;

    }

    .am-nav > li + .am-nav-header {
        margin-top: 0px;
    }
</style>

<body>
<div id="app">
    <!-- 头部区域开始 -->
    <header class="am-topbar am-topbar-inverse" id="lhl-head">
        <h1 class="am-topbar-brand">
            <a href="#">Tweet 后台管理</a>
        </h1>

        <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
                data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span
                class="am-icon-bars"></span></button>

        <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">

            <div class="am-topbar-right">
                <div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
                    <button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle"
                            data-am-dropdown-toggle>用户信息 <span class="am-icon-caret-down"></span></button>
                    <ul class="am-dropdown-content">
                        <li><a href="#">用户名:{{UserName}}</a></li>
                        <li><a href="#">修改密码</a></li>
                    </ul>
                </div>
            </div>

            <div class="am-topbar-right">
                <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm" @click="userLogin">管理员登录</button>
            </div>
        </div>
    </header>
    <!-- 头部区域结束 -->
    <!-- 数据化信息开始-->
    <div class="am-g lhl-min-height">
        <div class="am-u-lg-2">
            <ul class="am-nav lhl-list">
                <li><a href="./data.html">首页</a></li>
                <li class="am-nav-divider"></li>
                <li><a href="./data.html">数据展示</a></li>
                <li><a href="./user.html">用户管理</a></li>
                <li class="am-nav-header">推文管理</li>
                <li><a href="./change.html">账户管理</a></li>
                <li><a href="./editor.html">文章管理</a></li>
                <li><a href="./head.html">推广管理</a></li>
            </ul>
        </div>
        <div class="am-u-lg-10" id="lhl-right">
            <h1>推文管理</h1>
            <table class="am-table am-table-bordered am-table-radius" style="background-color:#fff;">
                <tr>
                    <td>
                        <div class="am-form-inline">
                            <div class="am-form-group">
                                <label>推文编号： </label>
                                <input type="number" class="am-form-field" placeholder="ID" v-model="tweetid">
                            </div>
                            <button type="submit" class="am-btn am-btn-primary" @click="requeryTweet(tweetid)">查询
                            </button>
                        </div>
                    </td>
                </tr>
            </table>
            <h2>查询结果</h2>
            <table class="am-table am-table-bordered am-table-radius am-table-striped" style="background-color:#fff">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>发布人</th>
                    <th class="am-text-truncate" style="max-width:305px;">内容</th>
                    <th>点赞</th>
                    <th>图片</th>
                    <th>创建时间</th>
                    <th>删除</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,key) in table">
                    <td>{{item.id}}</td>
                    <td><a href="#" @click="requeryUser(item.userid)">{{item.user_name}}</a></td>
                    <td class="am-text-truncate" style="max-width:305px;" v-bind:title="item.text">{{item.text}}</td>
                    <td>{{item.up}}</td>
                    <td>
                        <img v-bind:src="'.'+item.image1" v-if="item.image1" height="30px" width="30px"/>
                        <img v-bind:src="'.'+item.image2" v-if="item.image2" height="30px" width="30px"/>
                        <img v-bind:src="'.'+item.image3" v-if="item.image3" height="30px" width="30px"/>
                    </td>
                    <td>{{item.createdate}}</td>
                    <td><a href="#" @click="deleteTweet(key)">删除</a></td>
                </tr>

                </tbody>
            </table>
            <ul class="am-pagination">
                <li class="am-disabled"><a href="#">&laquo;</a></li>
                <!--                <li class="am-active"><a href="#">1</a></li>-->
                <li v-for="(index,key) in countPage()">
                    <a href="#" @click="SwitchDataPage(key)">{{index}}</a>
                </li>
                <li class="am-disabled"><a href="#">&raquo;</a></li>
            </ul>
        </div>
    </div>
    <!-- 数据化信息结束-->
</div>


<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            tableSource: [],
            table: [],
            tablePagelength: 10,
            tweetCount: 0,
            tweetid: null,
            UserPassword: '',
            UserName: '',
        },
        methods: {
            inputPwd: function () {
                swal({
                    title: '输入密码',
                    input: 'password',
                    inputAttributes: {
                        'maxlength': 30,
                        'autocapitalize': 'off',
                        'autocorrect': 'off'
                    }
                }).then(function (result) {
                    app.UserPassword = result;
                    $.post('../manager', {
                        type: 'login',
                        username: app.UserName,
                        password: app.UserPassword
                    }, function (response) {
                        if (response == "success") {
                            swal(
                                '您好！' + app.UserName,
                                '欢迎登录后台管理，请为所欲为吧!',
                                'success'
                            );
                        } else {
                            swal(
                                '登陆失败！',
                                '抱歉您登录不成功，没办法为所欲为!',
                                'error'
                            )
                        }
                    });
                })
            },
            userLogin: function () {
                //登录
                swal({
                    title: '输入登录账号',
                    input: 'text',
                    showCancelButton: true,
                    inputValidator: function (value) {
                        return new Promise(function (resolve, reject) {
                            if (value) {
                                resolve();
                            } else {
                                reject('请填写账号');
                            }
                        });
                    }
                }).then(function (result) {
                    // 输入用户完成
                    app.UserName = result;
                    app.inputPwd();
                })
            },
            SwitchDataPage: function (id) {
                //切换页
                this.requestUserlist(id);
            },
            countPage: function () {
                //计算页数
                return Math.round(this.tweetCount / this.tablePagelength + 0.5);
            },
            requestUserlist: function (page) {
                //请求tweet列表
                var requestList = {type: 'query.tweet.list'}
                if (page > 0) {
                    var id = this.table[this.table.length - 1].id;
                    requestList.tweetid = id;
                }
                $.post("../manager", requestList, function (result) {
                    if (result != '') {
                        result = JSON.parse(result);
                        result.tweet = result.tweet.sort(function (a, b) {
                            return b - a;
                        });
                        Vue.set(app, 'table', result.tweet);

                    }

                });
            },

            showUserInfo: function (userinfo) {
                //查看用户详情
                swal({
                    title: '用户详细信息',
                    html: "<table class='am-table am-table-bordered am-table-centered'>" +
                        "<tr>" +
                        "<td rowspan='7' class='am-text-middle'>" +
                        "<img src='." + userinfo.user_head + "' width='100px' />" +
                        "</td>" +
                        "<td>" +
                        "用户编号:" +
                        "</td>" +
                        "<td>" +
                        userinfo.userid +
                        "</td>" +
                        "</tr>" +
                        "<tr><td>用户昵称:</td><td>" + userinfo.user_name + "</td></tr>" +
                        "<tr><td>登录名:</td><td>" + userinfo.login_name + "</td></tr>" +
                        "<tr><td>性别:</td><td>" + userinfo.sex + "</td></tr>" +
                        "<tr><td>出生日期:</td><td>" + userinfo.borndate + "</td></tr>" +
                        "<tr><td>创建日期:</td><td>" + userinfo.create_date + "</td></tr>" +
                        "<tr><td>个人简介:</td><td>" + userinfo.simple + "</td></tr>" +
                        "</table>",
                    showCloseButton: true,
                });
            },
            requeryUser: function (userid) {
                //请求单一用户
                var _this=this;
                $.post("../manager", {
                    type: 'query.user.user',
                    userid: userid
                }, function (result) {
                    result = JSON.parse(result);
                    _this.showUserInfo(result.user[0]);
                })
            },
            requeryTweet: function (tweetid) {
                //请求单一推文
                var _this = this;
                $.post("../manager", {
                    type: 'query.tweet.tweet',
                    tweetid: tweetid
                }, function (result) {
                    result = JSON.parse(result);
                    Vue.set(app,'table',result.tweet);
                })
            },
            deleteTweet: function (key) {
                //删除推文
                var tweetid = this.table[key].id;
                swal({
                    title: '请输入我确定进行删除',
                    input: 'text',
                    showCancelButton: true,
                }).then(function (text) {
                    if (text != "我确定") {
                        swal("用户取消了删除");
                        return false;
                    }
                    $.post('../manager', {
                        type: 'delete.tweet',
                        tweetid: tweetid
                    }, function (result) {
                        if (result != "") {
                            result = JSON.parse(result);
                            var text = "删除失败";
                            var type = "error";
                            if (result.result) {
                                text = "删除成功";
                                type = "success";
                            }
                            swal({
                                text: text,
                                type: type,
                            });
                            app.table.splice(key, 1);
                        }

                    });
                });
            }
        },
        mounted: function () {
            // this.SwitchDataPage(0);
            this.UserName=localStorage.getItem('weibo_managername');
        },
        created: function () {
            var _this = this;
            //基本信息
            $.post('../manager', {
                type: 'query.all'
            }, function (result) {
                if (result != "") {
                    result = JSON.parse(result);
                    Vue.set(app, 'tweetCount', result.number[0]);
                    _this.SwitchDataPage(0);
                }
            });
        }
    });
</script>
<!--<script src="../js/options.js"></script>-->
<!--<script src="../js/manager_js.js"></script>-->
</body>
</html>